Skip to main content

The most common user interface design elements

· 4 min read
Yuri Santana

There are multiple conversation design elements that we keep witnessing pop up in each assistant interaction that are based on conversational interface design principles.

These elements are those present in human interactions and help the user in the task they want to fulfill, reducing frustration and increasing user satisfaction levels. Some of the most common ones are:

  • Welcome message, greeting and farewell

The assistant should introduce itself and state its function so the user knows what to expect from the interaction.

Example: "Hello! I'm Alex and I can help you set up an appointment."

The farewell message should inform the user of the status of the request and end the interaction.

Example: "Your appointment has been set for X. Thank you for scheduling. Goodbye."

  • Questions and feedback

Questions redirect the user and help clarify the intent this one has when interacting with our interface. They help us collect useful information and keep the user engaged in the conversation.

Example: "Would you rather make an appointment for today or tomorrow?"

  • Feedback and confirmation messages

It should be a must in every interaction with the assistant. It lets the user know the assistant is working on their request, if it was confused or if it needs clarifying details. More importantly, it lets the user know the assistant understands their intent and they're working together to address their request.

Example: "Okay, I'll schedule it for tomorrow morning."

  • Informational interactions and suggestions

Informational interactions are those that present information in a way to answer questions. They provide a general overview of options and it's often followed by a question prompting the user to pick one of the choices presented in the message.

Example: "We have the following [list of hours] available for tomorrow. Would you like to know more about the slots?"

Suggestions help the user pick an option that is understandable by our assistant. It can also guide the user to the best option available providing new information.

Example: "If you pick the 2pm slot it comes with a 50% discount for future appointments. Would you be interested in that?"

  • Apology statements and useful commands

Ideally, apology statements won't be necessary, but when mistakes happen or the users intent is not clear to the assistant, they should quickly apologize and redirect the user to another option available.

Example: "Unfortunately, we don't have 4pm slots available. Would you like to have a 5pm slot? "

When the issue keeps on happening, the apology statements should include understanding of the users problem, accepting responsability, explaining the issue, solving it and expressing gratitude for the user's understanding.

Example: "I understand how [customer’s feelings – i.e frustrating, upsetting] this problem has been for you. I’m sorry that you’ve had to deal with [the issue]. The issue happened because we [what caused the issue]. To prevent it from happening again [what we will do]. Thank you for bearing with us through this incident. If there’s anything else I can help you with, please let me know. "

Useful commands should be available at all stages of the conversation. It directs the users to what the assistant understands and how they can get there.

Example: "Would you like to continue? Yes - No "

  • Buttons and interactive elements

Buttons are visual elements that help the user to quickly pick between different options presented to them. They can be accompanied by images or extra text to aid the decision making.

Example: "It has been scheduled. What would you like to do next?

  • Button 1: Check out directions
  • Button 2: Check out parking "

Multiple interactive elements help construct a multi-modal assistant. They utilize audio, emojis, images, videos and more to help the user make a decision and help showcase the assistants' personality.

Example: "It has been scheduled [confirmation sound]. What would you like to do next? "

To know more about conversational structure check out our video about it on YouTube.


Join the conversation

Fonoster is developed in the open. Here are some of the channels you can use to reach us:

Discord

GitHub discussions:

Twitter: @fonoster